<template>
  <TsDialog v-bind="dialogSetting" @on-close="close" @on-ok="saveVersion">
    <template v-slot>
      <div>
        <TsForm
          ref="form"
          v-model="formValue"
          :itemList="formConfig"
        >
        </TsForm>     
        <div v-if="strategyData.tbodyList && formValue.appModuleId" class="mt-sm">
          <TsTable v-bind="strategyData" @getSelected="getSelected">
            <template slot="type" slot-scope="{row}">
              {{ typeTxt[row.type] }}
            </template>
          </TsTable>
        </div>
      </div>
    </template>
  </TsDialog>
</template>
<script>
export default {
  name: '',
  components: {
    TsForm: resolve => require(['@/resources/plugins/TsForm/TsForm.vue'], resolve),
    TsTable: resolve => require(['@/resources/components/TsTable/TsTable'], resolve)
  },
  props: {
    id: {type: Number}
  },
  data() {
    return {
      dialogSetting: {
        title: this.id ? this.$t('dialog.title.edittarget', {'target': this.$t('page.versions')}) : this.$t('page.newtarget', {'target': this.$t('page.versions')}),
        maskClose: false,
        isShow: true
      },
      formValue: {
        version: '',
        versionStrategyId: null
      },
      versionStrategyId: null,
      strategyPre: '',
      strategyData: {
        multiple: false,
        rowKey: 'id', 
        theadList: [
          {
            key: 'selection'
          }, 
          {
            title: this.$t('term.codehub.strategyname'),
            key: 'name'
          }, 
          {
            title: this.$t('page.type'),
            key: 'type'
          },
          { 
            title: this.$t('page.sourcebranch'),
            key: 'srcBranch'
          }, 
          {
            title: this.$t('page.targetbranch'),
            key: 'targetBranch'
          }],
        tbodyList: null
      },
      formConfig: [
        {
          type: 'select',
          label: this.$t('page.system'),
          name: 'appSystemId',
          transfer: true,
          validateList: ['required'],
          dynamicUrl: '/api/rest/codehub/appsystem/search',
          rootName: 'tbodyList',
          dealDataByUrl: this.$utils.getAppForselect,
          onChange: (val) => {
            this.changeAppSystemId(val);
          }
        }, 
        {
          name: 'appModuleId',
          type: 'select',
          transfer: true,
          validateList: ['required'],
          dynamicUrl: '/api/rest/codehub/appmodule/search',
          rootName: 'tbodyList',
          dealDataByUrl: this.dealDataByUrl,
          label: this.$t('page.subsystem'),
          onChange: (appModuleId) => {
            if (appModuleId) {
              this.getVersion(appModuleId);
            }
          }
        },
        {
          type: 'select',
          label: this.$t('page.versiontype'),
          width: '100%',
          name: 'versionTypeId',
          transfer: true,
          validateList: ['required'],
          url: '/api/rest/codehub/versiontype/search?isActive=1',
          rootName: 'tbodyList',
          textName: 'name',
          valueName: 'id',
          onChange: (val) => {
            this.formValue.versionTypeId = val;
            this.autofillName(this.formValue);
          } 
        }, {
          type: 'text',
          maxlength: 100,
          label: this.$t('term.framework.pkgversion'),
          width: '100%',
          name: 'version',
          isHidden: true,
          prepend: this.strategyPre,
          validateList: ['required']
        }
      ],
      typeTxt: {
        branch: this.$t('term.codehub.branchmerge'),
        issue: this.$t('term.codehub.issuemerge')
      }
    };
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    this.initData();
  },
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    initData() {
      this.$set(this.strategyData, 'tbodyList', null);
    },
    close() {
      this.$emit('close');
    },
    dealDataByUrl(nodeList) {
      let dataList = [];
      if (!this.$utils.isEmpty(nodeList)) {
        nodeList.forEach((item) => {
          if (item.id) {
            dataList.push({
              text: item.abbrName ? (item.name ? `${item.abbrName}(${item.name})` : item.abbrName) : (item.abbrName || item.name),
              value: item.id 
            });
          }
        });
      }
      return dataList;
    },
    saveVersion() {
      if (this.$refs.form && !this.$refs.form.valid()) {
        return false;
      }
      if (!this.formValue.versionStrategyId) {
        this.$Message.error(this.$t('form.validate.required', {target: this.$t('term.process.policy')}));
        return false;
      }
      let param = {
        ...this.formValue,
        version: this.strategyPre + this.formValue.version,
        id: this.id || undefined
      };
      this.$api.codehub.version.save(param).then(res => {
        if (res && res.Status == 'OK') {
          this.$emit('close', true);
        }
      });
    },
    getSelected(val, vals) {
      if (val.length > 0) {
        this.formValue.versionStrategyId = vals[0].id;
        this.strategyPre = vals[0].versionPrefix;
      } else {
        this.formValue.versionStrategyId = '';
        this.strategyPre = '';
      }
      this.hideName(this.formValue.versionStrategyId);
      this.autofillName(this.formValue);
    },
    hideName(id) {
      let versionItem = this.formConfig.find(form => form.name === 'version');
      if (versionItem) {
        this.$set(versionItem, 'isHidden', !id);
      }
    },
    changeAppSystemId(appSystemId) {
      this.formValue.appSystemId = appSystemId;
      this.formValue.appModuleId = '';
      this.formValue.versionStrategyId = '';
      this.hideName();

      const params = appSystemId ? { appSystemId } : {};
      const dynamicUrl = appSystemId ? '/api/rest/codehub/appmodule/search' : '';

      this.formConfig && this.formConfig.forEach((item) => {
        if (item && item.name === 'appModuleId') {
          this.$set(item, 'params', params);
          this.$set(item, 'dynamicUrl', dynamicUrl);
        }
      });
    },
    getVersion(appModuleId) {
      this.strategyPre = '';
      this.formValue.versionStrategyId = '';
      this.hideName();
      if (appModuleId) {
        this.$api.codehub.strategy.getList({needPage: false, appModuleId: appModuleId}).then(res => {
          this.isLoad = false;
          if (res && res.Status == 'OK') {
            this.$set(this.strategyData, 'tbodyList', res.Return.tbodyList);
          } else {
            this.$set(this.strategyData, 'tbodyList', []);
          }
        });
      } else {
        this.$set(this.strategyData, 'tbodyList', []);
      }
    },
    autofillName(config) {
      const { appModuleId = '', versionStrategyId = '', versionTypeId = '' } = config || {};
      this.formValue.version = '';
      if (appModuleId && versionStrategyId && versionTypeId) {
        const param = { appModuleId, versionStrategyId, versionTypeId };
        this.$api.codehub.version.autofillName(param).then((res) => {
          if (res && res.Status == 'OK' && res.Return.version) {
            this.formValue.version = res.Return.version.replace(this.strategyPre, '');
          }
        });
      }
    }
  },
  filter: {},
  computed: {},
  watch: {}
};
</script>
<style lang="less" scoped>
</style>
